# Component: Main Navigation

Responsive site header menu with authorization-aware links

Navigation Block

### BEM Anatomy

| Type      | Class Name            | Description                                                                 |
| --------- | --------------------- | --------------------------------------------------------------------------- |
| ==Block== | `.as-main-navigation` | The main `<ul>` container. Manages mobile spacing and horizontal alignment. |
| Element   | `__home`              | Specific item wrapper for the static Home link.                             |
| Element   | `__navigation`        | Base element for dynamic menu items generated by the CMS.                   |
| Modifier  | `__navigation--main`  | Differentiates primary navigation items from utility or footer variants.    |
| Element   | `__publishing`        | The protected portal link. Features complex authorization icon states.      |

### Publishing Portal Logic

The "Publishing" item utilizes `AuthorizeView` to toggle UI states. When unauthorized, the link directs to the Admin login and applies specific icon visibility logic based on the navigation's active state.

##### Generated HTML (Not Authorized)

```html
<ul class="as-main-navigation navbar-nav">
    <li class="as-main-navigation__home nav-item">
        <a href="/" class="nav-link active">Home</a>
    </li>
    <li class="as-main-navigation__publishing nav-item">
        <a href="/admin" class="nav-link">
            <!-- "Key" icon bounces when this link is active but unauthorized -->
            <i class="as-d-if-active fa-solid fa-key fa-bounce"></i>
            <i class="as-d-if-not-active fa-solid fa-pen-nib"></i>
            <span>Publishing</span>
        </a>
    </li>
</ul>
```

##### SCSS

```scss
.as-main-navigation {
  margin-right: auto;
  margin-bottom: 0.5rem;

  // Reset margin for desktop layouts
  @include media-breakpoint-up(md) {
    margin-bottom: 0;
  }

  .nav-link {
    white-space: nowrap; // Prevent wrapping in tight headers
    
    i {
      margin-right: 0.25rem; // Standard icon spacing
    }
  }
}
```
